<template>
	<view class="indexStyle" @touchmove.stop=""style="background-image: url('https://img.piaohenduo.com/wapiaoLive/components-bg.png');background-size: 100% 100%;">
		<!-- 头部 -->
		<view class="top" style="background-image: url('https://img.piaohenduo.com/wapiaoLive/components-bg-top.png');background-size: 100% 100%;">
			<!-- #ifndef MP-TOUTIAO -->
			<view class="location_search" :style="{'padding-top': height + 'px'}">
			<!-- #endif -->
			<!-- #ifdef MP-TOUTIAO -->
			<view class="location_search">
			<!-- #endif -->
				<navigator url="/subpages/city/city" class="index-area" hover-class="none">
					<text class="overflow" style="margin-right: 8rpx;">{{locCity.nm}}</text>
					<u-icon name="arrow-down-fill" size="15" style="display: flex;align-items: center;"></u-icon>
				</navigator>
				<view class="se">
					<!-- #ifndef MP-TOUTIAO -->
					<u-search class="search-form" bg-color="white" style="width: 350rpx;" placeholder-color="#666"
					:placeholder="choose===1?'请输入影院名称':'请输入电影名称'" :clearabled="true" :show-action="false" 
					v-model="searchVal"></u-search>
					<!-- #endif -->
					<!-- #ifdef MP-TOUTIAO -->
					<u-search class="search-form" bg-color="white" placeholder-color="#666"
					:placeholder="choose===1?'请输入影院名称':'请输入电影名称'" :clearabled="true" :show-action="false" 
					v-model="searchVal"></u-search>
					<!-- #endif -->
				</view>
			</view>
			<!-- 搜索头 start -->
			<!-- <view class="index-top" :style="{'padding-top':padT + 'px'}"> -->
			<view class="index-top">
				<view class="index-xuan flex-between align-center">
					<view class="d" :class="choose==index?'index-xuan-red':'index-xuan-hei'"
						@click="choose_re(index)" v-for="(item,index) in choose_top" :key="index"
						style="margin-left: 30rpx;position: relative;">
						{{item}}
						<view class="index-xuan-botm" v-if="choose==index"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 搜索头 end -->
		
		<!-- <view class="dropbox" :style="{'position': 'fixed','top': positionTop + 'px'}">
			<dropdownGroup :list="searchData" @change="changeType"></dropdownGroup>
		</view> -->
		
		<scroll-view class="index-movie-list" scroll-y :refresher-enabled="triggered" :refresher-triggered="freshing" @refresherrefresh="refresh(true)" 
		@scrolltolower="onreachBottom" :style="{'padding-top':indexTopHeight+'px'}" v-if="choose !== 0">
			<!-- <view class="dingtop" :style="{'padding-top': padT + 'px'}"> -->
				<!-- 轮播图 start -->
				<!-- <view class="index-banner">
					<view class="uni-padding-wrap">
						<view class="page-section swiper">
							<view class="page-section-spacing">
																<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000"
									:duration="500" indicator-color="#E1E1E1" :circular="true"
									indicator-active-color="#fff">
									<swiper-item class="swiper-item" v-if="swiperList"
										v-for="(item,index) in swiperList" :key="index" @click="bgtiaozhuan(item)">
										<image :src="item.wap_img" mode="" style="height: 100%;width: 100%;"></image>
									</swiper-item>
									<swiper-item class="swiper-item" v-else>
										<image src="../../static/img/other/index.png" mode=""
											style="height: 100%;width: 100%;"></image>
									</swiper-item>
								</swiper>
							</view>
						</view>
					</view>
				</view> -->
				<!-- 轮播图 end -->
			<!-- </view> -->

			<!-- 正在热映 start -->
			<movie-list v-if="choose == 1" :movielist="movielist" :boxHeight="boxHeight"></movie-list>
			<!-- 正在热映 end -->

			<!-- 影院 start -->
			<!-- <cinema  v-if="choose == 1" :searchList='searchList' :searchVal='searchVal' :searchBol='searchBol' :boxHeight="boxHeight" :positionTop="positionTop"></cinema> -->
			<!-- 影院 end -->

			<!-- 即将上映 start -->
			<show-list v-if="choose == 2" :showlist="showlist" @change="listChange"></show-list>
			<!-- 即将上映 end -->
		</scroll-view>
		<!-- 影院 start -->
		<cinema v-else :searchList='searchList' :searchVal='searchVal' :searchBol='searchBol' :boxHeight="boxHeight" :positionTop="positionTop" :cinemaFirstBoxPadT="indexTopHeight"></cinema>
		<!-- 影院 end -->
		
	</view>
</template>

<script>
	import title from '@/pages/components/title.vue'
	import showList from '@/pages/components/index/showlist.vue'
	import movieList from '@/pages/components/index/movielist.vue'
	import cinema from '@/pages/components/cinema.vue'
	// import dropdownGroup from '@/pages/components/public/dropdown-group.vue'
	export default {
		data() {
			return {
				timer: null,
				searchVal: '',
				searchBol: true,
				searchList: [],
				height: 51,
				// padT: 0,
				boxHeight: 0,
				//筛选条件
				condition: {
					page: 0,
					size: 10,
					total: 0,
					loaded: false
				},
				//tab选择
				choose: 0,
				//头部tab
				choose_top: ['影院', '正在热映', '即将上映'],
				// 电影列表
				movielist: [],
				// 即将上映
				showlist: [],
				// 下拉刷新
				triggered: true,
				freshing: false,
				swiperList: [], // 轮播列表
				noticeList: [], // 喇叭列表
				indexTopHeight:142,//正在热映、影院、即将上映盒子的高度
				cinemaFirstBoxPadT:0,
				toggleCity:true,//控制是否弹出切换城市弹窗（解决多次弹出弹窗问题）
				
			}
		},
		computed: {
			locCity: {
				get() {
					// return this.$store.state.chooseLoc ||{
					// 	nm: '城市'
					// }
					let loc = this.$store.state.locCity || (uni.getStorageSync('loc')==''?null:JSON.parse(uni.getStorageSync('loc')))
					let chooseloc = this.$store.state.chooseLoc || (uni.getStorageSync('chooseloc')==''?null:JSON.parse(uni.getStorageSync('chooseloc')))
					if(loc && chooseloc){
						//此时两个参数都有
						return chooseloc.update_time >= loc.update ? chooseloc : loc;//返回最新的地址
					}else{
						return chooseloc || loc || {nm:'北京'}
					}
				},
				set(val){}
			},
			// positionTop:{
			// 	get(){
			// 		return 92 + this.indexTopHeight
			// 	},
			// 	set(){}
			// }
		},
		components: {
			title,
			showList,
			movieList,
			cinema,
			// dropdownGroup
		},
		onLoad(option) {
			if (option.scene) {
				let scene = decodeURIComponent(option.scene)
				uni.setStorageSync('otherScene', scene)
			}
			if (option.type == 2) {
				this.choose = 2
				// this.refresh()//onShow有refresh了，否则从首页点击即将上映的共多少部进入时会双份
			}
			
			this.getLocalCity()
			
			this.$nextTick(() => {
				let menu = uni.getMenuButtonBoundingClientRect()
				console.log('getMenuButtonBoundingClientRect',this.height,'----->',menu.top);
				this.height = menu.top
				// 放在nextTick中：top高度的获得需要在this.height生效后
				this.$nextTick(()=>{
					let query = uni.createSelectorQuery().in(this)
					query.select('.top').boundingClientRect(data => {
					console.log('top','-------->',data);
					  this.indexTopHeight = data.height
					}).exec();
				})
			})
		},
		onShow() {
			if (this.choose != 0) {
				this.refresh()
			}
			// 轮播图
			// this.getSwiper()
			// this.getIndexSwipeAd()
			
			// uni.$on('getCinemaList',(res)=>{this.cinemaList = res})
		},
		watch: {
			'$store.state.chooseLoc'(val) {
				this.locCity = val
				this.searchVal = ''
			},
			searchVal: {
				handler(v, o) {
					if (v) {
						this.searchBol = false
						this.$common.inputDebounce(this, () => {
							this.getSearch(v)
						})
					} else {
						if (this.choose == 1 || this.choose == 2) {
							this.refresh()
						} else {
							this.searchList = []
						}
					}
				},
				immediate: true
			},
		},

		methods: {
			// 处理定位信息
			dealLocation(locaCity){
				// 当前获取的定位城市信息，可以直接重置
				// this.$store.commit('setLocCity', locaCity)
				// uni.setStorageSync('loc', JSON.stringify(this.$store.state.locCity))
				console.log(uni.getStorageSync('loc')=='');
				if(uni.getStorageSync('loc')==''){
					this.$store.commit('setLocCity', locaCity)
					uni.setStorageSync('loc', JSON.stringify(this.$store.state.locCity))
				}
				// let chooseloc = uni.getStorageSync('chooseloc') ? JSON.parse(uni.getStorageSync('chooseloc')) : null
				let chooseloc = this.$store.state.chooseLoc || (uni.getStorageSync('chooseloc')==''?null:JSON.parse(uni.getStorageSync('chooseloc')))
				if(!chooseloc || chooseloc.nm == locaCity.nm){//没有选择城市或选择城市等于定位城市
					this.$store.commit('setChooseLoc', locaCity)
					uni.setStorageSync('chooseloc', JSON.stringify(this.$store.state.chooseLoc))
				}else{
						if(this.toggleCity){//避免重复弹窗
						this.toggleCity = false;
						let loc = this.$store.state.locCity || (uni.getStorageSync('loc')==''?null:JSON.parse(uni.getStorageSync('loc')));
						// let chooseloc = this.$store.state.chooseLoc || (uni.getStorageSync('chooseloc')==''?null:JSON.parse(uni.getStorageSync('chooseloc')));
							uni.showModal({
								title: '切换城市',
								content: `定位到您在${locaCity.nm},是否切换？`,
								success:(res) =>{
									if (res.confirm) {
										// 添加入定位城市数据
										this.$store.commit('setLocCity', locaCity)
										uni.setStorageSync('loc', JSON.stringify(this.$store.state.locCity))
										// 添加入选择城市数据
										this.$store.commit('setChooseLoc', locaCity)
										uni.setStorageSync('chooseloc', JSON.stringify(this.$store.state.chooseLoc))
									} else if (res.cancel) {
										// this.$store.commit('setChooseLoc',chooseloc)
										// ----不加下面的代码有bug【首页中定位不同时不选择切换城市=》在电影-影院 中无法查询出初始影院列表】。原因不明
										let loc = uni.getStorageSync('loc')==''?null:JSON.parse(uni.getStorageSync('loc'))
										this.$store.commit('setLocCity', loc)
										uni.setStorageSync('loc', JSON.stringify(loc))
										// --------------------------------------------------------------
									}
								},
								complete:()=>{
									this.toggleCity = true;
								}
							});
						}	
				}
				// console.log('locaCity',locaCity)
				// console.log('chooseloc',chooseloc)
			},
			//获取当前定位
			getLocalCity() {
				// this.$store.state.chooseLoc
				this.$common.getNowLocation((result) => {
					this.$api.getLocalCity({
						lat: result.latitude,
						lng: result.longitude,
					}).then(res => {
						let locaCity = {
							...res.data.data,
							lat: result.latitude,
							lng: result.longitude
						}
						
						this.dealLocation(locaCity)
					})
				}, (error) => {
					// let locaCity = {"id":-1,"nm":"定位失败","detail":"定位未开启","update_time":1614405365767,"lat":null,"lng":null}
					let chooseLoc = {
						"id": 2,
						"nm": "北京",
						"update_time": new Date().getTime() * 1000
					}
					// this.$store.commit('setLocCity', locaCity)
					this.$store.commit('setChooseLoc', chooseLoc)
					// uni.setStorageSync('loc', JSON.stringify(this.$store.state.locCity))
					uni.setStorageSync('chooseloc', JSON.stringify(chooseLoc))
				}, true)
			},
			// ------------------------------------------------------------------------
			// 搜索
			getSearch(val) {
				uni.showLoading({
					title: '搜索中'
				})
				
				let chooseLoc = this.$store.state.chooseLoc || (uni.getStorageSync('chooseloc')==''?null:JSON.parse(uni.getStorageSync('chooseloc')))
				let loc = this.$store.state.locCity || (uni.getStorageSync('loc')==''?null:JSON.parse(uni.getStorageSync('loc')))
				// 请求参数
				let data
				if(chooseLoc.update_time >= loc.update){
					data = {
						s: val,
						cid: chooseLoc.id,
						lat: loc.lat,
						lng: loc.lng
					}
				}else{
					data = {
						s: val,
						cid: loc.id,
						lat: loc.lat,
						lng: loc.lng
					}
				}
				this.$api.getSearch(data).then(res => {
					this.searchBol = true
					this.freshing = false
					this.searchData = res.data.data
					if (this.choose == 0) {
						this.searchList = this.searchData.cinema.rows.map(item => {
							if (typeof item.hall_type == 'string') {
								item.hall_type = item.hall_type.length > 0 ? item.hall_type.split(',') : []
							}
							return item
						})
					}
					if (this.choose == 1) {
						this.movielist = this.searchData.movie.rows
					}
					if (this.choose == 2) {
						this.showlist = []
						this.mapLoction(this.searchData.coming.rows)
					}
					uni.hideLoading()
				}).catch(() => {
				})
			},
			//头部选择
			choose_re(row) {
				console.log('choose_re',row);
				if (row == 0) {
					this.triggered = false
				} else {
					this.triggered = true
				}
				this.choose = row

				if (this.searchVal) {
					this.searchVal = ''
				} else {
					this.refresh()
				}
			},
			// 跳转搜索
			searchgitor() {
				uni.navigateTo({
					url: '/subpages/search/search'
				})
			},
			//判断列表接口调用
			setInfoData() {
				if (this.choose == 1) {
					this.getMovie()
				} else if (this.choose == 2) {
					this.getUpcoming()
				}
			},
			// 获取电影列表
			getMovie() {
				this.$api.getMovie().then(res => {
					uni.hideLoading()
					this.freshing = false
					this.movielist = res.data.data
					this.condition.loaded = true
				})
			},
			// 获取即将上映列表
			getUpcoming() {
				uni.showLoading({
					title: '加载中'
				})
				if (!this.condition.loaded) {
					this.$api.getComing({
						limit: this.condition.size,
						offset: this.condition.page * this.condition.size
					}).then(res => {
						uni.hideLoading()
						this.freshing = false
						this.mapLoction(res.data.data.rows)
						this.condition.total = res.data.data.count
						if (this.condition.total <= this.condition.page * this.condition.size) {
							this.condition.loaded = true
						}
						this.condition.page += 1
					})
				}
			},

			// 获取轮播
			getSwiper() {
				this.$api.getSwiper({
					loc: 0
				}).then(res => {
					this.swiperList = res.data.data
				})
			},
			//获取公告轮播
			getIndexSwipeAd() {
				this.$api.getIndexSwipeAd().then(res => {
					this.noticeList = res.data.data
				})
			},

			//下拉刷新事件
			refresh(freshing = null) {
				uni.showLoading({
					title: '加载中'
				})
				if (freshing) {
					this.freshing = true
				}
				if (this.searchVal) {
					this.getSearch(this.searchVal)
					return
				}
				this.showlist = []
				this.condition.loaded = false
				this.condition.page = 0
				this.setInfoData()
				// uni.hideLoading()
			},

			//触底事件
			onreachBottom() {
				if (this.searchVal) return

				if (!this.condition.loaded) {
					uni.showLoading({
						title: '加载中'
					})
					this.setInfoData()
				}
			},
			// 设置高度
			getDom() {
				let query = uni.createSelectorQuery().in(this)
				query.selectAll('.dingtop').boundingClientRect(res => {
					let height = res[0] ? res[0].height : 0
					this.boxHeight = this.$store.state.windowHeight - height
				}).exec()
			},
			// 日期
			mapLoction(array) {
				let arr = this.gettime(array)
				let newArr = [];
				arr.forEach((item, i) => {
					let index = -1;
					let isExists = newArr.some((newItem, j) => {
						if (item.rt == newItem.rt) {
							index = j;
							return true;
						}
					});
					if (!isExists) {
						newArr.push({
							rt: item.rt,
							subList: [item],
						});
					} else {
						newArr[index].subList.push(item);
					}
				});
				this.showlist = this.$common.mergeArray(this.showlist, newArr, 'rt');
			},
			// 转换时间
			gettime(array) {
				let data = []
				for (var i = 0; i < array.length; i++) {
					data.push(array[i])
					let time2 = this.$options.filters['formateDate'](data[i].rt, 'MM月DD日')
					data[i].rt = time2
				}
				return data
			},
			// 轮播图跳转
			bgtiaozhuan(row) {
				let scene = uni.getStorageSync('uInfo')
				if (scene) {
					scene = JSON.parse(scene).id
				} else {
					scene = ''
				}
				uni.navigateTo({
					url: `/subpages/movie/movie?mid=${row.mid}&s=1&scene=${scene}`
				})
			},
			//想看点击后的数据更新
			listChange(like, index) {
				0 == like ?
					(this.showlist[index[0]].subList[index[1]].isLike = 1, this.showlist[index[0]].subList[index[1]]
						.wish++) :
					(this.showlist[index[0]].subList[index[1]].isLike = 0, this.showlist[index[0]].subList[index[1]]
						.wish--)
			},
			// changeType(){
			// 	uni.$emit('changeType')
			// },
			// getcinema()()
		},

	}
</script>

<style lang="scss" scoped>
	.indexStyle {
		position: relative;
		z-index: 1;
		height: 100vh;
		background-color: #fff;
		
		.top {
			position: fixed;
			z-index: 9;
			width: 100%;
		}

		.location_search {
			width: 100vw;
			padding: 0 24rpx 24rpx 40rpx;
			/* #ifdef MP-TOUTIAO */
			padding: 24rpx 40rpx;
			/* #endif */
			display: flex;
			justify-content: flex-start;
			align-items: center;
			// background: linear-gradient(90deg, #EF4546 0%, #EF298A 100%);
			z-index: 1000;

			.se {
				display: flex;
				align-items: center;
				/* #ifdef MP-TOUTIAO */
				width: 100%;
				/* #endif */
			}

			.index-area {
				display: flex;
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #2E2E2E;
			}

			.search-form {
				margin-left: 50rpx;
				/* #ifdef MP-TOUTIAO */
				width: 100%;
				/* #endif */
			}
		}

		.dingtop {
			padding: 2rpx 0;
		}

		.index-top {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			line-height: 30px;
			padding: 0 20rpx;
			// background: linear-gradient(99deg, #f43f3b, #ec008c);

			.index-area {
				font-size: 28rpx;
				display: flex;
				align-items: center;

				text {
					display: inline-block;
					max-width: 180rpx;
				}

				u-icon {
					margin-left: 8rpx;
					margin-bottom: 6rpx;
				}
			}

			.index-xuan-botm {
				height: 6rpx;
				width: 30rpx;
				border-radius: 3rpx;
				position: absolute;
				margin-top: 12rpx;
				background: linear-gradient(-90deg,rgba(126, 50, 219, .6) ,#FF5588);
				// left: 40rpx;
				left: 50%;
				transform: translateX(-50%);
				bottom: -10rpx;
			}

			.index-xuan {
				// margin-left: 136rpx;
				// position: absolute;
				// left: 50%;
				// transform: translateX(-50%);
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				display: flex;
				flex: 1;
				padding: 10rpx 20rpx 18rpx 20rpx;

				.d {
					&:first-of-type {
						margin-left: 0 !important;
					}
				}

				.index-xuan-red {
					font-weight: bold;
					color: #2E2E2E;
				}

				.index-xuan-hei {
					font-weight: 500;
					color: #666666;
				}
			}
		}

		// 轮播图
		.index-banner {
			// margin-top: 20rpx;
			width: 100%;

			.uni-padding-wrap {
				.page-section {
					.page-section-spacing {
						.swiper {
							display: block;
							// width: 710rpx;
							width: 100%;
							margin: 0 auto;
							text-align: center;
							// height: 270rpx;
							height: 200rpx;
							// border-radius: 22rpx;
							overflow: hidden;
							// padding: 0 20rpx;
							box-sizing: border-box;

							.swiper-item {
								width: 100%;
								height: 100%;

								image {
									border-radius: 0 !important;
									width: 100%;
									// height: 100%;
								}
							}
						}
					}
				}
			}
		}

		// 喇叭
		.index-laba {
			padding: 10rpx 20rpx;
			background-color: #FAFAFA;
			margin-top: 20rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;

			.laba-padding-wrap {
				height: 50rpx;
				width: 100%;
				margin-left: 10rpx;
				padding-top: 6rpx;
				overflow: hidden;

				.laba-section {
					.laba-section-spacing {
						width: 100%;

						.swiper {
							width: 100%;

							swiper-item {
								width: 100%;
								display: flex;

								.index-item-hui {
									color: #7F7F7F;
									flex: 15;
									text-align: right;
								}
							}
						}
					}
				}
			}
		}

		// 列表
		.time_top {
			font-size: 28rpx;
			font-weight: 700;
		}

		.index-movie-list {
			height: 100vh;

			.index-orderlist {
				display: flex;
				flex-direction: row;
				align-items: center;
				border-bottom: 1rpx solid #DFDFDF;
			}

			image {
				width: 140rpx;
				height: 185rpx;
				border-radius: 10rpx;
			}

			.index_font {
				margin-left: 25rpx;
				flex: 1;
				color: #6d6d6d;
				font-size: 26rpx;

				.index_font_top {
					display: flex;
					font-size: 30rpx;
					color: #000;
					font-weight: bold;
					align-items: center;

					.index_font_hua {
						font-size: 22rpx;
						font-weight: normal;
						border: 1rpx solid #B8B7B7;
						height: 30rpx;
						border-radius: 10rpx;
						margin-left: 10rpx;
						margin-top: 6rpx;
						overflow: hidden;

						.hua_left {
							color: #fff;
							background-color: #B9B8B8;
							padding: 0rpx 8rpx;
							box-sizing: border-box;
							height: auto;
						}

						.hua_right {
							color: #A19F9F;
							padding: 0 8rpx;
						}
					}
				}

				.index-font-two {
					margin-top: 12rpx;
				}

				.index-font-three {
					margin-top: 6rpx;
				}

				.index-font-four {
					margin-top: 6rpx;
				}

				.no-warp-one {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
			}

			.index-movie-yuan {
				color: #fff;
				padding: 12rpx 30rpx;
				font-size: 26rpx;
				border-radius: 28rpx;
				margin-left: 40rpx;
				box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.2)
			}

			.index-movie-blue {
				background-image: linear-gradient(45deg, #3c8ce7, #00eaff);
			}

			.index-movie-red {
				background-image: linear-gradient(45deg, #f43f3b, #ec008c);
			}

			.index-movie-cheng {
				background-image: linear-gradient(45deg, #ff9700, #ed1c24);
			}
		}
	}
</style>
